<template>  
  <view :style="theme" class="page">
    <view class="container">
		<view class="head">当前主题: {{ currentTheme }}</view>
		<view class="main">
			<view class="theme-item" v-for="(theme,index) in themesKey" :key="index" 
			:style="{ 'background-color': themeData[theme].bgColor, 'color': themeData[theme].textColor }"
			@click="changeTheme(theme)">点击切换<br/><!-- {{themesName[index]}} -->主题</view>  
		</view>
		<view class="footer">Copyright © Niceui paint, 2024, All Rights Reserved</view>
	</view>
  </view>  
</template> 

<script>
import themes from '@/store/theme.js'
export default {
  data() {
    return {
		themeData:themes,
		themesKey:Object.keys(themes),
		themesName:[]
	}
  },
  computed: {
    currentTheme() {  
      return this.$store.getters.currentTheme;  
    }
  },
  onShow(){
  	  this.themesName = []
  	  this.themesKey.forEach(key => {
  	    this.themesName.push(themes[key].name)
  	  });
  },
  methods: {
    changeTheme(theme) {
      this.$store.commit("changeTheme", theme)
    }
  }
}
</script>

<style scoped lang="scss">  
.page {
  background-color: $bg-color;
  height: 100vh;
}
.container {  
	width: 100vw;
	height: 100vh;
	//background: linear-gradient(to bottom, blue, green);
}  
.head{
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	/* #ifdef H5 */
	padding-top: 15rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	padding-top: 75rpx;
	/* #endif */
	color:$text-color;
}
.main{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top:10rpx ;
}
$border-radius:20rpx;
$border-color:#eee;
$item-margin-left: 6%;
$item-margin-top: 20rpx;
$item-width:17%;
.theme-item{
	width: $item-width;
	margin-left: $item-margin-left;
	margin-top: $item-margin-top;
	background-color: #fff;
	padding:30rpx 0rpx;
	border-radius:20rpx;
	border:solid 1rpx $border-color;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 26rpx;
}
.footer{
	height: 90rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	font-size: 28rpx;
	/* #ifdef H5 */
	bottom: 15rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	bottom: 35rpx;
	/* #endif */
	color:$text-color;
}
</style>
